import Vue from 'vue'
import Component from 'vue-class-component'
import '../orderStyle.css'
import OrderHandle from '../orderMethod.js'

@Component({
  props: {
    order: Object
  }
})
export default class OrderItemClass extends Vue {
  buttonName = ''
  hiddenBuy = false
  orderStatus = ''
  cancelName = '取消订单'

  created () {
    this.orderStatus = this.order.orderStatus
    switch (this.orderStatus) {
      case -3: {
        this.buttonName = '再次购买'
        this.hiddenBuy = false
      }
        break
      case 1 :
        {
          this.buttonName = '去支付'
          this.hiddenBuy = true
        }
        break
      case -2:case 2:case 3:case 31:case 35:case 36:case 71:case 72:
        {
          this.buttonName = '订单追踪'
          this.hiddenBuy = false
        }
        break
      case 4:
        {
          this.buttonName = '确认收货'
          this.hiddenBuy = true
          this.cancelName = '订单追踪'
        }
        break

      case 33:case 73:
        {
          this.buttonName = '申请退款'
          this.hiddenBuy = true
          this.cancelName = '订单追踪'
        }
        break

      case 5:case 6:
        {
          this.buttonName = '再次购买'
          this.hiddenBuy = true
          this.cancelName = '订单追踪'
        }
        break
      default : {

      }
    }
  }

  mounted() {
    window.payResult = this.payResult
  }

  payResult (result) {
    if (result === 'true') {

    } else {
      // Toast('支付失败')
      // alert('支付失败')
    }
  }

  handlerSure (e) {
    e.stopPropagation()
    switch (this.orderStatus) {
      case -3:case 5:case 6:
        {
          // '再次购买'
          OrderHandle.handleBuyAgain(this.order.products)
        }
        break
      case 1 :
        {
          // '去支付'
          OrderHandle.handleGoPay(this.order)
        }
        break
      case -2:case 2:case 3:case 31:case 35:case 36:case 71:case 72:
        {
          // '订单追踪'
          OrderHandle.handleFollowOrder(this.order.orderNo)
        }
        break
      case 4:
        {
          // '确认收货'
          OrderHandle.handleMakeSure(this.order.orderNo)
        }
        break

      case 33:case 73:
        {
          // '申请退款'
          OrderHandle.handleRefund()
        }
        break
      default : {

      }
    }
  }

  handlerCancel (e) {
    e.stopPropagation()
    this.orderStatus = this.order.orderStatus
    switch (this.orderStatus) {
      case 4:case 33:case 73: case 5:case 6:
        {
          // '订单追踪'
          OrderHandle.handleFollowOrder(this.order.orderNo)
        }
        break
      default : {
        OrderHandle.handleCancel(this.order.orderNo)
      }
    }
  }

  createProductItem () {
    let products = this.order.products
    const item = products.map(value => {
      return <dl class = 'orderContentStyleClass'>
          <dd>
            <img src={value.cover + '?x-oss-process=image/quality,q_50'}/>
          </dd>
          <dt>
            <p>{value.designerName}<font style='float:right;margin-right:15px;color:#666'>{value.currencyLogo}{value.showPrice}</font></p>
            <p>{value.productName}<font style='float:right;margin-right:15px;color:#666'>x{value.productQty}</font></p>
            <p>尺码：{value.size}</p>
          </dt>
        </dl>
    })
    return item
  }

  render () {
    return (
      <div clase='orderItemStyleClass' onClick={() => { this.$router.push({name: 'orderDetail', params: {orderId: this.order.orderNo}}) }}>
        <div style='font-size:0.9em' class = 'orderHeaderStyleClass'>
          <p >订单号：{this.order.orderNo}</p><span>{this.order.statusText}</span>
        </div>

        <OrderProductItem products = {this.order.products}></OrderProductItem>
        <div class = 'orderFooterStyleClass'>
          <p>共{this.order.products.length}件商品 合计：￥{this.order.amountPayable}</p>
          <span onClick={this.handlerSure}>{this.buttonName}</span>
          <span v-show={this.hiddenBuy} style='margin:5px 0px' onClick={this.handlerCancel}>{this.cancelName}</span>
        </div>
        <div style='height:10px;background:#f2f2f2'>
        </div>
      </div>
    )
  }
}

@Component({
  props: {
    products: Array
  }
})

export class OrderProductItem extends Vue {
  createProductItem () {
    if (!this.products) {
      return
    }
    let products = this.products
    const item = products.map(value => {
      return <dl class = 'orderContentStyleClass'>
          <dd>
            <img src={value.cover + '?x-oss-process=image/quality,q_50'}/>
          </dd>
          <dt>
            <p>{value.designerName}<font style='float:right;margin-right:15px;color:#666'>{value.currencyLogo}{value.showPrice}</font></p>
            <p>{value.productName}<font style='float:right;margin-right:15px;color:#666'>x{value.productQty}</font></p>
            <p>尺码：{value.size}</p>
          </dt>
        </dl>
    })
    return item
  }

  render () {
    return (
      <div>
        {this.createProductItem()}
      </div>
    )
  }
}
